<template>
  <mdp-lr-box :expand="expand" @expand="onExpand">
    <template #left>
      <xm-epic-features :productRequired="productRequired" v-if="hadInit" ref="tree" 
        :xm-product="xmProductCpd"
        :sel-project="selProject"
        @import-template="onTreeImportTemplate"
        @check-change="onEpicFeaturesRowClick"
        @product-select="onProductSelected"
        @product-clear="onProductClearSelect"
      />  
      </template>
    <div v-if="xmProductCpd && xmProductCpd.id">
      <xm-menu-mng :deriveId="deriveId"  :subOpType="subOpType" :multiple="multiple" :params="paramsCpd" :iterationFilterType="iterationFilterType"
        @select="$emit('select',$event)"
        @change="$emit('change',$event)"
        @change2="$emit('change2',$event)"
        @import-template="onImportTemplate"
        :xm-product="xmProductCpd"
        :sel-project="selProject"
        :parent-menu="parent"
        :xm-iteration="xmIteration"
        queryScope=""/>
    </div>

    <div v-else-if="product && product.id">
      <xm-menu-mng :deriveId="deriveId" :subOpType="subOpType" :multiple="multiple" :params="paramsCpd" :iterationFilterType="iterationFilterType"
        @select="$emit('select',$event)"
        @change="$emit('change',$event)"
        @change2="$emit('change2',$event)"
        @import-template="onImportTemplate"
        :xm-product="product"
        :sel-project="selProject"
        :parent-menu="parent"
        :xm-iteration="xmIteration"
        queryScope=""/>
      </div>
      <div v-else>
      <xm-menu-mng :deriveId="deriveId" :subOpType="subOpType" :multiple="multiple" :params="paramsCpd" :iterationFilterType="iterationFilterType"
        @select="$emit('select',$event)"
        @change="$emit('change',$event)"
        @change2="$emit('change2',$event)"
        @import-template="onImportTemplate"
        :xm-product="product"
        :sel-project="selProject"
        :parent-menu="parent"
        :xm-iteration="xmIteration"
        queryScope=""/>
      </div>
    </mdp-lr-box> 
</template>

<script>
import util from '@/components/mdp-ui/js/util' //全局公共库

import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
// 在 Vue 3 中，可以使用 defineAsyncComponent 方法来创建异步组件
import { defineAsyncComponent } from 'vue';
 
 
// 创建一个异步组件，它会从一个外部API动态导入组件
const XmMenuMng = defineAsyncComponent(() =>
  import('../xmMenu/XmMenuMng.vue') // 假设LazyComponent.vue是你想要懒加载的组件
);// 创建一个异步组件，它会从一个外部API动态导入组件
 
export default {
  props: ['xmProduct', 'xmIteration', 'selProject','productRequired' ,'multiple','isTpl','subOpType','iterationFilterType','deriveId','parentMenu'],
  components: { 
    XmMenuMng
  },
  computed: {
    ...mapState(useUserStore, ['userInfo', 'roles']),
    xmProductCpd() {
      
      if (this.xmProduct && this.xmProduct.id) {
        return this.xmProduct
      }
      if (this.xmIteration && this.xmIteration.id && this.xmIteration.productId) {
        return { id: this.xmIteration.productId, productName: this.xmIteration.productName }
      }
      return null
    }, 
    
    paramsCpd(){
      if(this.parent?.menuId){ 
        return {pmenuId:this.parent?.menuId}
      }else{
        return null
      }
    }
  },
  watch: {
    'parentMenu.menuId':function(){
      this.parent=this.parentMenu
    },
  },
  data() {
    return {
       product: null,
       productId:null,
      parent: null, 
				hadInit: false, 
        expand:false,
    } //end return
  }, //end data
  methods: {
    onExpand(expand){
      this.expand=expand
      if(expand){
        if(!this.hadInit){
           this.hadInit=true
         }
      }
    },
    onEpicFeaturesRowClick(menu, checked) {
      if (checked == false) {
        this.parent = null
      } else {
        this.parent = menu
      }
    },
    onProductSelected(product) {
      this.product = product
      this.parent = null
    },
    onProductClearSelect() {
      this.product = null
      this.parent = null
    },
    onImportTemplate(){
      this.$refs['tree']?.refresh()
    },
    onTreeImportTemplate(parent){
      this.parent=parent
    }
  }, //end method
  mounted() {
    this.product = { ...this.xmProduct }
    if (this.xmIteration && this.xmIteration.id) {
      if (!this.xmProduct || !this.xmProduct.id) {
        this.product = {
          id: this.xmIteration.productId,
          productName: this.xmIteration.productName
        }
      }
    } 
    this.parent=this.parentMenu
  } //end mounted
}
</script>

<style lang="less" scoped />
